<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Resume</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="styles/site.css" />
		<!--[if lt IE 9]>
      <script src="script/html5shiv.min.js"></script>
      <script src="script/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!--设置导航样式，样式为默认-->
		<nav class="navbar navbar-default">
			<!--设置为流动布局-->
			<div class="container-fluid">
				<!--导航头-->
				<div class="navbar-header">
					<!--设置a标签。样式为navbar-brand 让文字图标更大一号-->
					<a href="index.html" class="navbar-brand">
						<!--样式为图标样式， 设置图片为房子-->
						<span id="" class="glyphicon glyphicon-home" />
					</a>

					<!--navbar-toggle样式让按钮折叠起来，data-toggle让按钮变成出发器，data-target点击按钮触发的目标-->
					<button class="navbar-toggle" data-toggle="collapse" data-target="#divNav">
						<!--显示横杠-->
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>

				<!--collapse样式默认展开,navbar-collapse表示默认显示，id为对应的触发器的id-->
				<div class="collapse navbar-collapse navbar-right" id="divNav">
					<!--nav让ul为导航栏样式；navbar-nav让li横向排列-->
					<ul class="nav navbar-nav">
						<li>
							<!--#info为锚点，在页面中直接跳转-->
							<a href="#info">基本信息</a>
						</li>
						<li>
							<a href="#skill">基本信息</a>
						</li>
						<li>
							<a href="#project">基本信息</a>
						</li>
						<li>
							<a href="#link">基本信息</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<div class="container">

			<!--header标签让标题和和导航来分开，page-header样式让标签伤上下分离开来-->
			<header class="page-header">
				<h1>个人简历<small>Resume online</small></h1>
			</header>

			<div class="row">
				<!--lead样式让字体颜色变淡-->
				<h2 id="info" class="lead">基本信息</h2>
				<div class="col-sm-3">
					<blockquote>
						<h2>RammDerek</h2>
						<footer>web前端工程师</footer>
					</blockquote>
					<div class="row text-center">
						<img src="img/t.jpeg" class="img-responsive img-circle img-thumbnail" />
					</div>
					<p></p>
					<!--text-center让字体在中间显示-->
					<div class="row text-center">
						<div class="col-sm-4">
							<h2><abbr title="5年开发">5</abbr></h2>
						</div>
						<div class="col-sm-4">
							<h2><abbr title="3个大型项目">3</abbr></h2>
						</div>
						<div class="col-sm-4">
							<h2><abbr title="10年工作经验">10</abbr></h2>
						</div>
					</div>
				</div>
				<div class="col-sm-9">
					<div class="jumbotron">
						<h2>自我评价</h2>
						<hr />
						<p><kbd>5</kbd>年开发</p>
						<p><kbd>3</kbd>个大型项目</p>
						<p><kbd>10</kbd>年工作经验</p>
						<div class="text-right">
							<button class="btn btn-primary">
								了解更多
								<span id="" class="glyphicon glyphicon-search">
								</span>
							</button>
						</div>
					</div>
					<table class="table table-bordered table-condensed">
						<tr>
							<th>姓名</th>
							<th>年龄</th>
							<th>学历</th>
						</tr>
						<tr>
							<td>Data</td>
							<td>Data</td>
							<td>Data</td>
						</tr>
					</table>
				</div>
			</div>

			<div class="row">
				<h2 id="skill" class="lead">所会技能</h2>
				<span id="" class="label label-success">
						HTML5
					</span>
				<span id="" class="label label-info">
						JAVA
					</span>
				<span id="" class="label label-warning">
						JQUERY
					</span>
				<div class="progress">
					<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%;">
						<span>
								40% Complete
							</span>
					</div>
				</div>
			</div>
		<script src="script/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>